<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0,maximum-scale=1.0, user-scalable=0">
  <script src="./ajax.js"></script>
  <title>关机</title>
  <style>
    #my-list {
      list-style: none;
      padding: 0;
      margin: 0;
      li {
        border-bottom: #eee solid 1px;
        padding: 20px;
        button {
          font-size: 18px;
        }
      }
    }
  </style>
</head>
<body>
  <ul id="my-list"></ul>
  <script>
    ;(function () {
      const oUl = document.getElementById('my-list')
      const computerList = [
        {
          url: 'http://10.0.0.6:10064',
          label: '龙凤溪-服务器'
        },
        {
          url: 'http://192.168.111.129:10064',
          label: '石油天然气-台式机'
        }
      ]
      oUl.innerHTML = computerList.map(function (item, index) {
        return `
          <li>
            <b>${item.label}</b>  
            <button data-idx="${index}">关机</button>
          </li>
        `
      }).join('')

      const oLis = oUl.getElementsByTagName('li')
      for(let index=0; index<oLis.length;index++) {
        oLis[index].onclick = function () {
          const url = computerList[index].url + '/shutdown'
          commitShutDown(url)
        }
      }
    })();

    function commitShutDown (url) {
      ajax({
        url,
        type: 'POST',
        data: {
          name: 'bestime',
        },
        success: function (res) {
          console.log('成功', res)
        },
        error: function (err) {
          console.log('失败', err)
        },
      })
    }
  </script>
</body>
</html>